<section class="padding">

  <h1 class="grey-text flex align-center">
    <i class="large material-icons">view_list</i>
    Products
  </h1>

  <ng-container *ngIf="!(loading$ | async); else loadingTpl">

    <!--Sorting-->
    <div class="col s12">
      <label>Sort by</label>
      <select class="browser-default" [formControl]="sortControl">
        <option value="title">Name</option>
        <option value="price">Price</option>
      </select>
    </div>

    <!--Search Input-->
    <div class="input-field">
      <i class="material-icons prefix">search</i>
      <input placeholder="Search Product.." [formControl]="search">
    </div>


    <!--Products List-->

    <div class="mt flex">

      <app-product *ngFor="let product of (products$ | async)"
                   (add)="addProductToCart($event)"
                   (subtract)="subtract($event)"
                   [product]="product">
      </app-product>

    </div>

  </ng-container>

  <!--Spinner-->
  <ng-template #loadingTpl>
    <div class="progress">
      <div class="indeterminate"></div>
    </div>
  </ng-template>

</section>
